<script setup lang="ts">
import { useRoute } from 'vue-router'

import { useUserStore } from '@/stores/modules/userStore'
import homeIcon1 from "@/assets/icons/home-active.png"
import homeIcon2 from "@/assets/icons/home-unactive.png"
import mineIcon1 from "@/assets/icons/mine-active.png"
import mineIcon2 from "@/assets/icons/mine-unactive.png"

// const router = useRouter()
const userStore = useUserStore()
const route = useRoute()
const active = ref('home')

const nowRoute = computed(() => route)

const tabBar = [
  {
    title: '首页',
    name: 'home',
    to: '/',
    active: homeIcon1,
    inactive: homeIcon2,
  },
  {
    title: '我的',
    name: 'mine',
    to: '/mine',
    active: mineIcon1,
    inactive: mineIcon2,
  },
]

/** 是否显示tabbar */
const isShowTab = computed(() => {
  return ['home', 'mine'].some((item) => nowRoute.value.name === item)
})

onBeforeMount(async () => {
  // 初始化处理
  // await userStore.getUserAuth()
})

onMounted(() => { })
</script>

<template>
  <div class="container_main">
    <!-- v-if="!userStore.appLoading" -->
    <router-view ></router-view>
    <van-tabbar v-model="active" fixed route active-color="#2a2e77" inactive-color="#737fa4" safe-area-inset-bottom>
      <van-tabbar-item v-for="(item, index) in tabBar" :key="index" :name="item.name" :to="item.to">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.container_main {
  background-color: #f0f6fc;
  min-height: 100vh;
  margin: auto;
  max-width: 100%;
}
</style>
